<template>
  <div class="message-content">
    <van-row class="message-header">
      <van-col span="18">
        <van-search v-model="value" shape="round" placeholder="请输入订单号" @input="onQueryMessage()" />
        <!--   background="#1989FA" -->
      </van-col>
      <van-col span="6">
        <van-button round plain type="default" @click="onAllRead()">全部已读</van-button>
      </van-col>
      <van-col span="24">
        <van-notice-bar left-icon="volume-o" :text="numMessage" />
      </van-col>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="body-content">
          <van-swipe-cell v-for="(item, index) in items" :key="index" class="messageList-content">
            <!-- <template #left>
        <van-button square type="primary" text="选择" />
            </template>-->
            <van-cell center>
              <van-row>
                <van-col span="24">
                  <van-col span="24">{{item.type}}（{{item.code}}）</van-col>
                  <van-col span="18">{{item.datasource}}</van-col>
                  <van-col span="4">
                    <van-tag plain type="primary" v-if="item.approvalStatus===0">审核</van-tag>
                    <van-tag plain type="danger" v-if="item.approvalStatus===1">弃审</van-tag>
                    <van-tag plain type="warning" v-if="item.approvalStatus===2">驳回</van-tag>
                  </van-col>
                  <van-col span="2">
                    <van-icon name="chat-o" dot v-show="item.viewStatus===0" />
                  </van-col>
                  <van-col span="24">审批意见：{{item.opinions}}</van-col>
                  <van-col span="8">审批人：{{item.approved}}</van-col>
                  <van-col span="12">审批时间:{{item.approvalTime}}</van-col>
                </van-col>
              </van-row>
            </van-cell>
            <template #right>
              <van-button
                square
                style="height:100%"
                type="default"
                @click="onSetMessage(item.id)"
              >标为已读</van-button>
              <!-- <van-button square  style="height:100%" type="danger" text="删除" /> -->
            </template>
          </van-swipe-cell>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { queryMessage, setMessage, setAllMessage } from "@/api/message/message";
import { clearArr } from "@/api/public/public";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 条件搜素
      value: "",
      // 消息
      items: [],
      // 下拉翻页
      page: 1,
      limit: 10,
      // 未读消息数量
      num: 0,
      numMessage: "",
      count: "", //总数
      loading: false,
      finished: false,
      refreshing: false,
      // 防抖计时器
      timeout:"",
    };
  },
  created() {
    // this.findMessage();
    this.onRefresh();
  },
  methods: {
    // 下拉刷新事件
    onLoad() {
      this.findMessage();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page = 1;
      this.num = 0;
      this.numMessage = `当前还有${this.num}条消息未读！`;
      this.items = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 全部已读
    onAllRead() {
      // 获取账套和用户信息
      // let user = this.$session.get("user");
      let person = this.$session.get("person");
      let Account = this.$session.get("Account");
      let condition = {
        datasource: JSON.parse(Account),
        userID: JSON.parse(person).personId,
      };
      setAllMessage(condition, (data) => {
        data.success === true &&
          ((this.value = ""), this.onRefresh(), Toast("全部消息已读！"));
      });
    },
    // 条件搜索
    onQueryMessage() {
      // this.page = 1;
      // this.items = [];
      this.debounce(500);
    },
    //防抖debounce代码：
    debounce(wait) {
      let _this = this;
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        _this.onRefresh();
      }, wait);
    },
    // 消息已读；
    onSetMessage(id) {
      let condition = id;
      setMessage(condition, (data) => {
        if (data.success === true) {
          // 刷新
          //   this.page = 1;
          //   this.items = [];
          //   this.onRefresh();
          this.items.map((ele) => {
            ele.id === id && (ele.viewStatus = 1);
          });
          this.num--;
          this.numMessage = `当前还有${this.num}条消息未读！`;

          // this.findMessage();
        }
      });
    },
    findMessage() {
      // let items = this.items;
      // 获取账套下的数据库
      // let DsName = this.$session.get("DsName");
      // let user = this.$session.get("user");
      let person = this.$session.get("person");
      let Account = this.$session.get("Account");
      let condition = {
        Account: JSON.parse(Account),
        userID: JSON.parse(person).personId,
        code: this.value,
        page: this.page++,
        limit: this.limit,
      };
      queryMessage(condition, (data) => {
        // this.items.concat(data.data);
        let items = data.data;
        // 总数
        this.count = data.count;
        this.num += data.num;
        this.numMessage = `当前还有${this.num}条消息未读！`;
        items.forEach((ele) => {
          this.items.push(ele);
        });
        // 去重
        this.items = clearArr(this.items);
        //   // 加载状态结束
        this.loading = false;
        this.refreshing = false;
        // 数据全部加载完成
        if (this.items.length >= this.count) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.message-content {
  .message-header {
    height: 60px;
    width: 100%;
    color: white;
    background-color: white;
    line-height: 60px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
  }
  .body-content {
    margin-top: 100px;
    margin-bottom: 60px;
    .messageList-content {
      .van-button--square {
        border-radius: 0;
        height: 100% !important;
      }
    }
  }
}
</style>
